<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        img {
            width: 300px;
            height: 300px;
        }

        .head_box {
            width: 1500px;
            height: 50px;

        }

        li {
            float: left;
            padding: 0 10px 0 0;
        }

        .tbody {
            width: 1500px;
            position: relative;
            /* top: -1000px; */
            display: flex;
            background-color: aqua;
        }

        .tfoot li {
            line-height: 200px;
        }

        .tfoot button {
            width: 50px;
            height: 50px;
        }

        .tfoot span {
            display: inline-block;
            width: 60px;
            height: 30px;
            text-align: center;

        }

        .tfoot input {
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="head_box">
        <ul onclick="top_li()">
            <li><span class="kt" class="show">空调</span></li>
            <li><span class="ds">平板电视</span></li>
            <li><span class="dq">生活电器</span></li>
            <li><span class="xyj">洗衣机</span></li>
            <li><span class="bx">冰箱</span></li>
        </ul>
    </div>
    <div class="tbody">

    </div>
    <div class="tfoot">


    </div>
    <div class="box">
        <label>全选<input type="checkbox" onclick="inp_all()"></label>
        <button onclick="car_clear()">清空购物车</button>
        <button onclick="del_select()">删除选中</button>
        <span>总价:<span class="zong"></span></span>
        <span>已选择<span class="zongshu">0</span>件商品</span>

    </div>
    <!-- <script src="./jquery.3.7.1.js"></script> -->
    <script>

        // 空调数组
        let kt_arr = [{
            name: `空调`,
            id: 1,
            img: `https://pic.rmb.bdstatic.com/bjh/news/9c5a2d1ba9f5618dd10bd8f29b999909.jpeg`,
            synopsis: `111111`,
            price: 100
        }, {
            name: `空调`,
            id: 2,
            img: `https://pic.rmb.bdstatic.com/bjh/250503/dump/360987c461843127b7ecbd99b352b8ad.jpeg`,
            synopsis: `2222`,
            price: 105
        }, {
            name: `空调`,
            id: 3,
            img: `https://pics0.baidu.com/feed/b17eca8065380cd78914b52c8d0dae3a588281bb.jpeg@f_auto?token=1109e4de26d73c45784a6a5ebec00429`,
            synopsis: `3333`,
            price: 101
        },]
        // 电视数组
        let ds_arr = [{
            name: `平板电视`,
            id: 4,
            img: `https://pics1.baidu.com/feed/2fdda3cc7cd98d106b0d4d5e1cbde7017aec9011.jpeg@f_auto?token=0ff4b9514fb61e06a67c2b4d993b37c4`,
            synopsis: `23`,
            price: 100
        }, {
            name: `平板电视`,
            id: 5,
            img: `https://imgservice.suning.cn/uimg1/b2c/image/KOesCSruyVtFBN88uRgK0Q.png_800w_800h_4e`,
            synopsis: `34523`,
            price: 105
        }, {
            name: `平板电视`,
            id: 6,
            img: `https://pic.rmb.bdstatic.com/bjh/240708/news/ad031749a28f4b4c15c5f0c10e57bf917746.png?x-bce-process=image/watermark,bucket_baidu-rmb-video-cover-1,image_YmpoL25ld3MvNjUzZjZkMjRlMDJiNjdjZWU1NzEzODg0MDNhYTQ0YzQucG5n,type_RlpMYW5UaW5nSGVpU01HQg==,w_21,text_QOS5kOiPseivtOWlveeJqQ==,size_21,x_16,y_16,interval_2,color_FFFFFF,effect_softoutline,shc_000000,blr_2,align_1`,
            synopsis: `5342`,
            price: 101
        },]

        // 购物车数组
        let car = []

        let tbody = document.querySelector(`.tbody`)
        let tfoot = document.querySelector(`.tfoot`)
        let kt = document.querySelector(`.kt`)
        let ds = document.querySelector(`.ds`)
        let dq = document.querySelector(`.dq`)
        let xyj = document.querySelector(`.xyj`)
        let bx = document.querySelector(`bx`)
        let top_inp = document.querySelectorAll(`.head_box ul li`)
        let zong = document.querySelector(`.zong`)
        let box = document.querySelector(`.box input`)
        let zongshu = document.querySelector(`.zongshu`)
        // 事件委托/导航切换
        function top_li() {
            top_inp.forEach(item => {
                item.classList.remove(`show`)
            })
            if (event.target.innerHTML == `空调`) {
                kt.classList.add(`show`)
                data(kt_arr)
            } else if (event.target.innerHTML == `平板电视`) {
                ds.classList.add(`show`)
                data(ds_arr)
            } else {
                alert(`只写了空调和电视`)
            }
        }

        // 商品渲染
        function data(arr) {
            tbody.innerHTML = ``
            arr.forEach((item, index) => {
                tbody.innerHTML += `
                    <div onclick="add_car(${item.id})">
                        <img src="${item.img}" alt="1">
                        <p>${item.synopsis}</p>
                        <span>${item.price}</span>
                    </div>
                `
            })
        }
        data(kt_arr)

        // 购物车渲染
        function car_data(arr) {
            tfoot.innerHTML = ``
            arr.forEach((item, index) => {
                tfoot.innerHTML += `
                    <div>
                        <li><input type="checkbox" onclick="inp_state(${index})" ${item.state ? `checked` : ``}></li>
                        <li><img src="${item.img}" alt="1"></li>
                        <li>
                            <p>${item.synopsis}</p>
                        </li>
                        <li><span>${item.price}</span></li>
                        <li><button onclick="jian(${index})">-</button><span>${item.num}</span><button onclick="jia(${index})">+</button></li>
                        <li><button onclick="del(${index})">删除</button></li>
                    </div>
                `
            })
            zongjia()
            box.checked = car.every(item => item.state)
        }

        // 添加
        function add_car(id) {
            let num = kt_arr.find(item => item.id == id)
            if (!car.some(item => item.id == id)) {
                car.push({
                    id: num.id,
                    img: num.img,
                    synopsis: num.synopsis,
                    price: num.price,
                    num: 1,
                    state: false
                })
            } else {
                car.find(item => item.id == id).num++
            }

            let num1 = ds_arr.find(item => item.id == id)
            if (!car.some(item => item.id == id)) {
                car.push({
                    id: num1.id,
                    img: num1.img,
                    synopsis: num1.synopsis,
                    price: num1.price,
                    num: 1,
                    state: false
                })
            } else {
                car.find(item => item.id == id).num++
            }
            car_data(car)

        }

        // 清空购物车
        function car_clear() {
            car.splice(0, car.length - 1)
            tfoot.innerHTML = ``

        }

        // +1
        function jia(index) {
            car[index].num += 1
            car_data(car)

        }

        // -1
        function jian(index) {
            if (car[index].num > 1) {
                car[index].num -= 1
            } else {
                alert(`只剩一件商品了`)
            }
            car_data(car)

        }

        // 删除单个
        function del(index) {
            car.splice(index, index + 1)
            car_data(car)

        }
        // 选中
        function inp_state(index) {
            car[index].state = event.target.checked

            console.log(box);
            car_data(car)

        }
        // 删除选中
        function del_select() {
            car = car.filter(item => !item.state)
            car_data(car)

        }
        // 全选
        function inp_all() {
            car.forEach(item => item.state = event.target.checked)
            car_data(car)
        }

        // 总价
        function zongjia() {
            zong.innerHTML = car.filter(item => item.state).reduce((a, b) => a += b.num * b.price, 0)
            zongshu.innerHTML = car.filter(item => item.state).reduce((a, b) => a += b.num, 0)
        }

    </script>
</body>

</html>